// 引入核心插件
import BScroll from '@better-scroll/core'
// 引入slide插件
import Slide from '@better-scroll/slide'

// 因为初始化BScroll需要在mounted钩子函数中，所以需要手动引入vue的钩子函数
// onUnmounted就是卸载时的钩子函数
// Compositiion API需要知道暴漏的API是什么 需要手动的Import
import { onMounted, onUnmounted, ref } from 'vue'

BScroll.use(Slide)

export default function useSlider(wrapperRef) {
  // 因为最终需要将slider返回出去所以需要定义在外部，用来存放BS类
  const slider = ref(null)
  // 赋予默认值0 currentPageIndex.value = 0
  const currentPageIndex = ref(0)

  // 在onMounted钩子中操作
  onMounted(() => {
    // wrapperRef是一个响应式的ref对象，wrapperRef.value就是DOM对象
    // 只有在Mounted钩子函数中，才会有DOM结构，也就是响应式ref对象只有在mounted之后wrapperRef.value中存储的才是DOM对象，之前都是unfined
    // 使用sliderVal缓存slider.value
    const sliderVal = slider.value = new BScroll(wrapperRef.value, {
      click: true,
      scrollX: true,
      scrollY: false,
      momentum: false,
      bounce: false,
      probeType: 2,
      // 轮播使用bs-slide插件的默认配置
      slide: true
    })

    sliderVal.on('slideWillChange', (page) => {
      // 因为定义的是一个ref对象，所以赋值一定要是.value
      currentPageIndex.value = page.pageX
    })
  })

  // 卸载时的销毁函数
  onUnmounted(() => {
    slider.value.destroy()
  })

  return {
    slider,
    currentPageIndex
  }
}
